import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { NavBar, Toast, Button } from "react-vant";
import "./index.css";
const Index: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [items, setItems] = useState<any>({});

  let xck = JSON.parse(localStorage.getItem("xck")!) || [];
  const xc = () => {
    const jc = xck.find((item: any) => item.id == id);
    if (jc) {
      Toast.success("行程已存在");
    } else {
      Toast.success("行程添加成功");
      xck.push(items);
    }
    localStorage.setItem("xck", JSON.stringify(xck));
  };

  useEffect(() => {
    axios.get("/api/detail", { params: { id } }).then((resp) => {
      setItems(resp.data.items);
    });
  }, []);

  return (
    <div>
      <NavBar title={items.title} onClickLeft={() => navigate(-1)} />
      <div>
        <img src={items.img} />
        <p>标题:{items.title}</p>
        <p>价格:{items.price}</p>
        <p>详情:{items.word}</p>
        <div>
          <Button type="primary" block round onClick={() => xc()}>
            添加到行程
          </Button>
        </div>
      </div>
    </div>
  );
};
export default Index;
